<template>
  <div class="model-page">
    <div class="model" :style="style">
      <div class="header">
        <div class="tabs"><span>日程</span></div>
        <div class="cancel" @click="cancel">
          <a-icon type="close"/>
        </div>
      </div>
      <div class="body">
        <div>
          <a-input ref="userNameInput" v-model="content" placeholder="输入日程内容">
            <a-dropdown slot="suffix" :trigger="['click']">
              <a class="ant-dropdown-link drop-link"  @click="e => e.preventDefault()">
                <span :class="groupTypeColor[group]">■</span>
                <a-icon type="down" class="margin-left-10"/>
              </a>
              <a-menu slot="overlay" @click="selectMenu">
                <a-menu-item :key="index" v-for="(item,index) in groupType">
                  <span :class="groupTypeColor[index]">■</span> {{item}}
                  <a-icon type="check" v-if="group===index"/>
                </a-menu-item>
              </a-menu>
            </a-dropdown>

          </a-input>
        </div>
        <div class="margin-tb-10">
          <a-icon type="clock-circle"/>
          <span class="margin-left-10">{{date}}</span>
          <a-time-picker placeholder="开始时间"  :allowClear="false" v-if="!isAllDay"  :defaultValue="moment(beginDateTime, 'HH:mm')"
                         :default-open-value="moment(beginDateTime, 'HH:mm')" format="HH:mm"
                         @change="onChangeBeginTime" class="unset-border">
            <span slot="suffixIcon"></span>
          </a-time-picker>
          <span>—</span>
          <span class="margin-left-10">{{date}} </span>
          <a-time-picker placeholder="结束时间" :allowClear="false" v-if="!isAllDay" :defaultValue="moment(endDateTime, 'HH:mm')"
                         :default-open-value="moment(endDateTime, 'HH:mm')" format="HH:mm"
                         @change="onChangeEndTime" class="unset-border">
            <span slot="suffixIcon"></span>
          </a-time-picker>
          <a-checkbox :checked="isAllDay" @change="onChangeAllDay">
            全天
          </a-checkbox>

        </div>

      </div>
      <div class="footer">
        <a-button v-if="!contents" type="primary" @click="addSchedules">新建日程</a-button>
        <a-button v-else type="primary" @click="editSchedules">编辑日程</a-button>
      </div>

    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    name: "ModelSchedule",
    props:{
      x:Number,
      y:Number,
      day:Number,
      contents:String,
      groups:Number,
      beginTime:String,
      endTime:String,

    },
    data(){
      return{
        style:{},
        groupType:'工作,休息,个人,加班,家庭'.split(","),
        groupTypeColor:'blue,grayGreen,orange,red,purple'.split(','),
        content:this.contents,
        group:this.groups,
        date:null,
        beginDateTime:'00:00',
        endDateTime:moment(new Date()).format('HH:mm'),
        isAllDay:false,
      }
    },
    mounted() {
    },
    created() {
      this.setPosition()
    },
    watch:{
      x(newVal,old){
        this.setPosition()
      },
    },
    methods:{
      moment,
      selectMenu(e){
        console.log(e.key)
        this.group = e.key
      },
      onChangeBeginTime(time, timeString){
        // console.log(time, timeString);
        this.beginDateTime = timeString;
      },
      onChangeEndTime(time, timeString){
        // console.log(time, timeString);
          this.endDateTime = timeString;
      },
      onChangeAllDay(e){
        this.isAllDay = e.target.checked;
        if(this.isAllDay){
          this.beginDateTime = "00:00";
          this.endDateTime = "23:59";
        }else{
          this.beginDateTime = '00:00';
          this.endDateTime = moment(new Date()).format('HH:mm');
        }
      },
      cancel(){
        this.$emit("cancel")
      },
      addSchedules(){
        if(!this.content.trim()){this.$message.error("请输入日程内容!");return;}
        let date = moment(new Date().setDate(this.day)).format('YYYY-MM-DD');
        let begin = null;
        let end = null;
        if(this.isAllDay){
          // 如果是全天只设置天，不设置时间
          begin = `${date}`
          end = `${date}`
        }else{
          begin = `${date} ${this.beginDateTime}`
          end = `${date} ${this.endDateTime}`
        }
        this.$emit("addSchedules",this.content,this.group,begin,end)
      },
      editSchedules(){
        if(!this.content.trim()){this.$message.error("请输入日程内容!");return;}
        let date = moment(new Date(this.beginTime).setDate(this.day)).format('YYYY-MM-DD');
        let begin = null;
        let end = null;
        if(this.isAllDay){
          // 如果是全天只设置天，不设置时间
          begin = `${date}`
          end = `${date}`
        }else{
          begin = `${date} ${this.beginDateTime}`
          end = `${date} ${this.endDateTime}`
        }
        this.$emit("editSchedules",this.content,this.group,begin,end)
      },
      setPosition(){
        if(this.contents){ // 如果是编辑，回显数据
          this.date = moment(new Date(this.beginTime).setDate(this.day)).format('YYYY/MM/DD');
          this.beginDateTime = moment(this.beginTime).format('HH:mm');
          this.endDateTime = moment(this.endTime).format('HH:mm');
          if(this.beginDateTime=='00:00'&&this.endDateTime=='00:00'){
            // 判断是不是全天
            this.isAllDay = true;
          }
        }else{
          this.date = moment(new Date().setDate(this.day)).format('YYYY/MM/DD');
          this.beginDateTime = this.beginTime;
          this.endDateTime = this.endTime;
        }
        this.style={
          position: "absolute",
          top: this.y+'px',
          left: this.x+'px'
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .model-page{
    position: absolute;
    top:0;
    width: 100%;
    height: 100vh;
  }
  .drop-link{
    background-color: #fff;
    padding-left: 3px;
  }
  .model{
    position: absolute;
    background-color: #fff;
    width: 420px;
    height: auto;
    box-shadow: 0 10px 30px 0 var(--KWebDialog-color-shadow,rgba(0,0,0,.2))!important;
    border-radius: var(--KWebDialog-hint-borderRadius,4px)!important;
    padding: 20px;
    .header{
      width: 380px;
      display: flex;
      .tabs{
        width: 300px;
        span{
          font-size: 18px;
          color:#000;
        }
      }
      .cancel{
        width: 80px;
        text-align: right;
        cursor: pointer;
      }
    }
    .body{
      padding: 20px 0;
      .unset-border{
        width: 60px;
      }
    }
    .footer{
      text-align: right;
    }

  }

  .margin-left-10{
    margin-left: 10px;
  }
  .margin-tb-10{
    margin: 10px 0;
  }
  .blue{ // 工作
    color: #4FACF1;
  }
  .grayGreen{ // 休息
    color: #6BD35F;
  }
  .orange{ // 个人
    color: #F9D850;
  }
  .red{ // 加班
    color: #EB436A;
  }
  .purple{ // 家庭
    color: #F9D64A;
  }
</style>
<style>
  .unset-border .ant-time-picker-input{
    border:0px;
  }
</style>